<script lang="ts" setup>
import { reactive, ref } from 'vue'

// 响应数据源
const form = reactive({
  name: '',
  region: '',
  date: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
// 数据校验规则
const rules = ref({
  name: [
    {required: true, message: "活动名称不能为空！", trigger: "blur"},
    {min: 3, max: 6, message: "活动名称长度需要在 3 - 6 之间！", trigger: "blur"}
  ],
  region: [
    {required: true, message: "活动地点不能为空！", trigger: "change"}
  ],
  date: [
    {type: "date", required: true, message: "互动时间不能为空！", trigger: "change"}
  ],
  type: [
    {required: true, message: "活动类型不能为空！", trigger: "change"}
  ],
  resource: [
    {required: true, message: "活动资源不能为空！", trigger: "change"},
  ],
  desc: [
    {required: true, message: "活动描述不能为空！", trigger: "blur"},
  ]
})

// <1> 创建ref响应式数据
const formRef = ref(null)

// <2> 整体校验
const onLogin = () => {
  // 表单整体校验
  formRef.value.validate((result) => {
    if(!result) {
      return alert("表单校验失败！")
    }
  })
  // 通过后执行后续逻辑,如发送请求提交表单数据等
  console.log("ok")
}

const oncancel = () => {
  formRef.value.resetFields()
}

</script>

<template>
  <el-form 
  :model="form" 
  :rules="rules"
  label-width="auto" 
  style="max-width: 600px"
  ref="formRef">
    <el-form-item label="Activity name" prop="name">
      <el-input v-model="form.name" />
    </el-form-item>

    <el-form-item label="Activity zone" prop="region">
      <!-- 
        el-select+el-option：下拉列表
          placeholder:输入框提示文本
      -->
      <el-select 
      v-model="form.region" 
      placeholder="please select your zone">
        <!-- 
          label：标签值
          value：真实值
        -->
        <el-option 
        label="Zone one" 
        value="shanghai" />

        <el-option 
        label="Zone two" 
        value="beijing" />
      </el-select>
    </el-form-item>

    <el-form-item label="Activity time" prop="date">
        <el-date-picker
          v-model="form.date"
          type="date"
          placeholder="Pick a date"
          style="width: 100%"
        />
    </el-form-item>

    <el-form-item label="Instant delivery" >
      <!-- 
        el-witch:开关
      -->
      <el-switch v-model="form.delivery" />
    </el-form-item>

    <el-form-item label="Activity type" prop="type">
      <el-checkbox-group v-model="form.type">
        <el-checkbox value="Online activities" name="type">
          Online activities
        </el-checkbox>
        <el-checkbox value="Promotion activities" name="type">
          Promotion activities
        </el-checkbox>
        <el-checkbox value="Offline activities" name="type">
          Offline activities
        </el-checkbox>
        <el-checkbox value="Simple brand exposure" name="type">
          Simple brand exposure
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>

    <el-form-item label="Resources" prop="resource">
      <!-- 
        el-radio-group + el-radio:单选框
      -->
      <el-radio-group v-model="form.resource">
        <el-radio value="Sponsor">Sponsor</el-radio>
        <el-radio value="Venue">Venue</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="Activity form" prop="desc">
      <el-input v-model="form.desc" type="textarea" />
    </el-form-item>

    <el-form-item>
      <!-- 
        el-button:按钮
      -->
      <el-button type="primary" @click="onLogin()">Create</el-button>
      <el-button @click="oncancel()">Cancel</el-button>
    </el-form-item>
  </el-form>
</template>

